<!--
 * @Author: Nico
-->
<template>
  <div class="UiPdaCard">
    <div v-if="!info.extension.checkbox.value" class="flex mt-2 bg-c-eee p-2" :class="{ hidden: conditionProperty.hidden }">
      <p class="bg-c-eee" style="background: #eee">{{ translateTitle('Ve.elements.标签详情') }}</p>
      <van-icon class="ml-1" :name="isShowBatch ? 'eye-o' : 'closed-eye'" @click="isShowBatch = !isShowBatch" />
    </div>
    <!-- 预览 -->
    <template v-if="!hasPreview">
      <!-- rounded-xl border-solid border-current m-2 -->
      <div class="p-2 w-full bg-c-eee flex items-center justify-between" style="overflow: hidden">
        <div v-if="info.extension.checkbox.value" class="w-1/6 mr-1">
          <van-checkbox v-model="check" name="all" @click="checkboxFuc" />
        </div>
        <div class="flex items-center justify-center flex-wrap flex-1">
          <div v-for="(v, i) of title" :key="i" class="w-full mb-2 posion-re" :style="{ color: info.extension.color.value, width: v.width + '%' }">
            <span class="font-bold">{{ v.title }}:</span>
            <span :style="{ color: v.contentColor }">{{ v.field }}</span>
          </div>
          <div class="text-xs mb-2 w-full text-right text-color">{{ translateTitle('Ve.elements.更多') }}>></div>
        </div>
      </div>
    </template>
    <!--  -->
    <template v-else-if="isShowBatch">
      <div :class="{ hidden: conditionProperty.hidden }">
        <div v-show="cardData.length != 0">
          <div
            v-for="(v, i) of cardData"
            :key="i"
            :ref="'self' + info._id"
            v-ui-ref="vSetRef"
            class="p-2 w-full mb-2 bg-c-eee posion-re flex items-center justify-between rounded-xl border-solid border-current"
            style="overflow: hidden"
          >
            <div v-if="info.extension.checkbox.value" class="w-1/6 mr-1">
              <van-checkbox v-model="v.check" name="all" @click="checkboxFuc" />
            </div>
            <div class="flex items-center justify-center flex-wrap flex-1" @click="clickMore(v)">
              <div
                v-for="(vv, ii) of title"
                :key="ii"
                class="w-full my-1 bg-c-eee posion-re"
                :style="{ color: info.extension.color.value, width: vv.width ? vv.width + '%' : '100%' }"
              >
                <span class="font-bold">{{ vv.title }}:</span>
                <span :style="{ color: vv.contentColor }">{{ v[vv.field] }}</span>
              </div>
              <div class="text-xs my-1 w-full text-right" style="color: blue; cursor: pointer">{{ translateTitle('Ve.elements.更多') }}>></div>
            </div>
          </div>
        </div>
        <van-empty v-show="cardData.length == 0" class="VirtualList" :description="translateTitle('Ve.elements.暂无相关数据')" />
      </div>
    </template>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin } from '@ve/mixin'
  import { Icon, Checkbox, Empty } from 'vant'

  export default defineComponent({
    name: 'UiPdaCard',
    components: {
      [Icon.name]: Icon,
      [Empty.name]: Empty,
      [Checkbox.name]: Checkbox,
    },

    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data: function () {
      return {
        isShowBatch: true, // 是否显示批次
        title: [],
        clickObj: {},
        conditionProperty: {
          disabled: false,
          hidden: false,
        },
        checkboxAll: false, //全选
        check: false,
      }
    },
    computed: {
      titleNameData() {
        return this.info.extension.tableColumns.value
      },
      cardData() {
        return this.info?.data?.formData || []
        // return [
        //   {
        //     name: '川A88881',
        //     doc: 'LD22122700003/创建',
        //     phone: '张三/13378989090',
        //     docNum: '3',
        //     carNum: '3000',
        //     boxNum: '288',
        //     createPerson: '李四/2023-03-1212:00',
        //   },
        //   {
        //     name: '川A88881',
        //     doc: 'LD22122700003/创建',
        //     phone: '张三/13378989090',
        //     docNum: '3',
        //     carNum: '3000',
        //     boxNum: '288',
        //     createPerson: '李四/2023-03-1212:00',
        //   },
        //   {
        //     name: '川A88881',
        //     doc: 'LD22122700003/创建',
        //     phone: '张三/13378989090',
        //     docNum: '3',
        //     carNum: '3000',
        //     boxNum: '288',
        //     createPerson: '李四/2023-03-1212:00',
        //   },
        // ]
      },
    },
    watch: {
      titleNameData: {
        handler(newVal) {
          this.title = newVal
        },
      },
    },

    created() {
      console.log('卡片数据', this.info.extension.tableColumns.value)
      this.title = this.info.extension.tableColumns.value
    },
    methods: {
      translateTitle,
      clickMore(v) {
        this.clickObj = v
        this.runEventTask('clickMore')
      },
      checkboxFuc() {
        console.log('cardData', this.cardData)
      },
    },
  })
</script>
<style lang="scss" scoped>
  .UiPdaCard {
    :deep() {
      .van-checkbox,
      .van-checkbox__icon {
        width: 100% !important;
      }
      .van-checkbox__icon .van-icon {
        display: inline-block !important;
      }
      .van-checkbox__icon .van-icon {
        width: 1rem;
        height: 1rem;
      }
    }
  }

  .bg-c-eee {
    background: #eee;
  }
  .text-color {
    color: #0833f0;
  }

  .posion-re {
    position: relative;
  }
  .check {
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 40%;
    width: 40px;
    height: 40px;
    z-index: 999;
  }
</style>
